<!DOCTYPE html>
<!-- 
	浏览器是如何加载html页面的？
		1.构建DOM (Document Object Model) 树：渲染引擎解析HTML文档，每个标签生成一个DOM节点，最后生成DOM树。
		2.构建渲染树：解析每个DOM节点的CSS信息（不包括display:none的节点和head节点）。
		3.布局渲染树：从根节点递归调用，计算每一个节点的大小、位置。
		4.绘制渲染树：遍历渲染树，从UI层来绘制每个节点。
 -->

<html>
<head>
<meta charset="UTF-8">
<title>欢迎登陆</title>
<!-- css资源 -->
<link rel="stylesheet" type="text/css" href="./static/css/common.css">
<link rel="stylesheet" type="text/css" href="./static/css/index.css">
<!-- js资源 -->
<script type="text/javascript" src="./static/js/jquery-3.6.0.js"></script>
<script type="text/javascript">
	function login(){
		let tel=document.getElementById("tel").value;
		let pwd=document.getElementById("pwd").value;
		
		console.log(tel,pwd);
		//发送 post 请求调用 LoginServlet
		jQuery.ajax({
			url: "http://localhost:8081/little_proj/login",
			dataType: "JSON",
			type: "POST",
			data:{
				tel:tel,
				pwd:pwd
			},
			//如果成功，接收后端的返回值
			success:function(result){
				console.log(result);
			}
		});
	}
</script>

</head>
<body>
	<div id="main" class="w">
		<div id="login_box" class="center">
			<div id="box_content">
				<div id="box_title" class="w">欢迎登录</div>
				<!-- autocomplete="off" 取消输入框的自动记忆功能 -->
				<input id="tel" class="u_msg" type="text" placeholder="请输入手机号" autocomplete="off"/>
				<input id="pwd" class="u_msg" type="password" placeholder="请输入密码"/>
				<button id="login_btn" onclick="login()">登录</button>
			</div>
		</div>
	</div>
</body>
</html>